<!--  -->
<template>
  <div class="order-list">
    <template v-for="(item,index) in orderList">
      <div class="list-item pl-20" :key="index">
        <div class="title flex justify-between aligin-center">
          <img class="shop-icon" :src="item.shop_logo" alt />
          <span class="f-12 ml-10 mr-auto">{{item.shop_name}}</span>
          <!-- <span class="enter-shop flex justify-center aligin-center mr-24">进店</span> -->
        </div>
        <div class="mt-20 pr-26" @click="$emit('toDetail',item.order_no)">
          <template v-for="(_item,_index) in item.goods_list">
            <div class="order-wrap flex">
              <img class="product-img" :src="_item.image" alt />
              <div class="product-info ml-22">
                <div class="goods-title ellipsis-line2 f-14">{{_item.goods_name}}</div>
                <div class="color-gray f-14 mt-10">{{_item.sku_name}}</div>
                <div class="mt-26 flex justify-between">
                  <span class="f-14">￥{{_item.price}}</span>
                  <span class="f-12 color-gray">x{{_item.num}}</span>
                </div>
              </div>
            </div>
          </template>
          <div class="total mt-28">
            共{{item.goods_count}}件商品 应付款:
            <span class="f-bold">￥{{item.pay_money}}</span>
          </div>
          <div class="total-tip" v-if="item.is_discount_buy">仅幸运用户发货，请关注活动记录</div>
        </div>
        <!-- 待付款 -->
        <div
          class="f-12 flex justify-between aligin-center mt-30 border-top"
          v-if="item.order_status==0"
        >
          <div class="flex aligin-center color-red">待付款</div>
          <div class="flex f-14">
            <span
              class="btn-item flex justify-center aligin-center"
              @click.stop="$emit('cancelOrder',item.order_no,index)"
            >取消订单</span>
            <span
              class="btn-item border-red flex justify-center aligin-center color-red ml-10"
              @click="$emit('toDetail',item.order_no)"
            >去支付</span>
          </div>
        </div>
        <!-- 待发货 -->
        <div
          class="f-12 flex justify-between aligin-center mt-30 border-top"
          v-if="item.order_status==1"
        >
          <div class="flex aligin-center color-red">待发货</div>
          <div class="flex f-14">
            <span
              class="btn-item border-red flex justify-center aligin-center color-red ml-10"
              @click="notify(item,index)"
            >{{item.qr_code?'查看券码':'提醒发货'}}</span>
          </div>
        </div>
        <!-- 已发货 -->
        <div
          class="f-12 flex justify-between aligin-center mt-30 border-top"
          v-if="item.order_status==2"
        >
          <div class="flex aligin-center color-red">已发货</div>
          <div class="flex f-14">
            <router-link
              tag="span"
              :to="{name:'deliverDetail',params:{id:item.order_no}}"
              class="btn-item flex justify-center aligin-center"
            >查看物流</router-link>
            <span
              class="btn-item border-red flex justify-center aligin-center color-red ml-10"
              @click="$emit('orderCf',item.order_no,index)"
            >确认收货</span>
          </div>
        </div>
        <!-- 待评价 -->
        <div
          class="f-12 flex justify-between aligin-center mt-30 border-top"
          v-if="item.order_status==3"
        >
          <div class="flex aligin-center color-red">待评价</div>
          <div class="flex f-14">
            <span
              class="btn-item flex justify-center aligin-center"
              @click="$emit('orderDel',item.order_no,index)"
            >删除</span>
            <span
              class="btn-item border-red flex justify-center aligin-center color-red ml-10"
              @click="$emit('evaluation',item.order_no)"
            >去评价</span>
          </div>
        </div>
        <!-- 售后中 -->
        <div
          class="f-12 flex justify-between aligin-center mt-30 border-top"
          v-if="item.order_status==-1"
        >
          <div class="flex aligin-center color-red">售后中</div>
          <div class="flex f-14">
            <span class="btn-item flex justify-center aligin-center">售后详情</span>
            <span class="btn-item border-red flex justify-center aligin-center color-red ml-10">售后完成</span>
          </div>
        </div>
        <!-- 已完成 -->
        <div
          class="f-12 flex justify-between aligin-center mt-30 border-top"
          v-if="item.order_status==4"
        >
          <div class="flex aligin-center color-red">订单已完成</div>
          <div class="flex f-14">
            <span
              class="btn-item flex justify-center aligin-center"
              @click="$emit('orderDel',item.order_no,index)"
            >删除</span>
          </div>
        </div>
        <!-- 已关闭 -->
        <div
          class="f-12 flex justify-between aligin-center mt-30 border-top"
          v-if="item.order_status==5"
        >
          <div class="flex aligin-center color-red">订单已关闭</div>
          <div class="flex f-14">
            <span
              class="btn-item flex justify-center aligin-center"
              @click="$emit('orderDel',item.order_no,index)"
            >删除</span>
          </div>
        </div>
      </div>
    </template>
    <div class="no-data" v-if="orderList.length==0"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    orderList: {
      type: Array,
      default: () => {
        return []
      },
      required: true
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  methods: {
    notify(item, index) {
      if (item.qr_code) {
        this.$emit('changeStutas', item, index)
      } else {
        this.$notify('已提醒发货')
      }
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.list-item {
  margin-bottom: 18px;
  box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
  border-radius: 5px;
  .order-wrap{
    margin-bottom: 10px;
  }
  .title {
    height: 54px;
    border-bottom: 1px solid rgba(234, 234, 234, 1);
  }
  .shop-icon {
    height: 20px;
    width: 20px;
  }
  .enter-shop {
    height: 21px;
    width: 43px;
    color: rgba(232, 48, 56, 1);
    border: 1px solid rgba(232, 48, 56, 1);
    border-radius: 5px;
  }
  .product-img {
    height: 103px;
    width: 103px;
    border-radius: 5px;
  }
  .product-info {
    flex: 1;
    .goods-title {
      height: 36px;
      line-height: 18px;
    }
  }
  .total {
    text-align: right;
    font-size: 15px;
  }
  .total-tip {
    margin-top: 10px;
    text-align: right;
    font-size: 12px;
    color: #E83038;
  }
  .tip {
    text-align: right;
  }
  .btn-item {
    height: 35px;
    width: 76px;
    border: 1px solid rgba(188, 188, 188, 1);
    border-radius: 5px;
  }
  .border-red {
    border: 1px solid rgba(234, 55, 63, 1);
  }
  .border-top {
    padding: 16px 21px;
    border-top: 1px solid #eaeaea;
  }
}
</style>